<template>
  <div class="skills_list">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h3>{{ $route.params.id }}</h3>
      </div>
      <div
        v-for="item in tableData"
        :key="item.id"
        class="text item"
        @click="linkToDetail(item.id)"
      >
        <p class="title">{{ item.title }}</p>
        <p class="date">{{ item.date }}</p>
        <el-divider />
      </div>
      <el-pagination
        :current-page="currentPage"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleSizeChange"
      />
    </el-card>
  </div>
</template>

<script>
import { auxiliaryQuery } from '@/api/plantList'
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      currentPage: 1,
      total: 0,
      tableData: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const params = {
        page_num: this.currentPage,
        page_size: 10,
        conditions: [{
          key: 'type_info',
          operator: 'eq',
          value: this.$route.params.id
        }],
        order_info: {
          key: 'create_time',
          order: 'desc'
        }
      }
      const res = await auxiliaryQuery(params)
      const code = Number(res.code)
      if (code === 200) {
        this.tableData = res.data
        this.total = res.paging.total
        this.tableData.map(item => {
          item.date = parseTime(item.create_time)
        })
      }
    },
    handleSizeChange(val) {
      this.currentPage = val
      this.getList()
    },
    linkToDetail(id) {
      this.$router.push(`/plantlib/skill/detail/${this.$route.params.id}&${id}`)
    }
  }
}
</script>

<style>
.skills_list{
  position: relative;
  min-height: calc(100vh - 150px);
  padding-bottom: 100px;
}
</style>
